<template>
  <div class="classifylist">
    <span class="classifytitle" v-if="item">{{ title }}</span>
    <ul class="classifyul" v-if="item">
      <ClassIfyItem
        v-for="feilei in item.categories"
        :key="feilei.id"
        :feilei="feilei"
        :itemkid="item.kind"
      />
    </ul>
    <div v-else>
      <ul>
        <van-skeleton
          title
          avatar
          :row="1"
          v-for="(item, index) in 6"
          :key="index"
        />
      </ul>
    </div>
  </div>
</template>

<script>
import ClassIfyItem from "@/components/ClassIfyItem.vue";

export default {
  props: ["item"],
  components: {
    ClassIfyItem,
  },
  data() {
    return {};
  },
  computed: {
    title() {
      return this.item.kind === "group"
        ? "食物分类"
        : this.item.kind === "brand"
        ? "热门品牌"
        : "连锁餐饮";
    },
  },
};
</script>

<style lang="less" scoped>
.classifylist {
  width: 100%;
  border: 1px solid rgba(109, 109, 109, 0.39);
  margin-top: 15px;
  background: #ffffff;
  .classifytitle {
    color: gray;
    display: block;
    width: 100%;
    text-align: center;
    border-bottom: 1px dashed rgba(109, 109, 109, 0.39);
    padding: 5px;
    position: relative;
    font-size: 20px;
    &::after {
      content: "";
      display: block;
      position: absolute;
      left: -8px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #f6f6f6;
      border-right: 1px solid rgba(109, 109, 109, 0.39);
    }
    &::before {
      content: "";
      display: block;
      position: absolute;
      right: -8px;
      bottom: -8px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      border-left: 1px solid rgba(109, 109, 109, 0.39);
      background: #f6f6f6;
    }
  }
  .classifyul {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
</style>